<template>
  <div class="item-tod">
    <div class="item-title">待办事项</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="department" label="责任部门" width="400" />
      <el-table-column prop="message" label="待处理信息" width="calc(100% -400)">
        <template #default="scope">
          <el-button
            :disabled="scope.row.status"
            link
            :type="scope.row.textStatus"
            @click="handleCellClick(scope, scope.row)"
            >{{ scope.row.message }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗信息 -->
    <el-dialog v-model="dialogTableVisible" title="Shipping address" width="900">
      <div class="view-table-modal">
        <div class="view-table-row" v-for="item in gridData" key="item">
          <div v-for="key in Object.keys(item)" :key="key" class="view-table-cell">
            <div>{{ dataList[key] }}</div>
            <div>{{ item[key] }}</div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="modalConfirmClick()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import "./index.scss";
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { todoSearch, todoUpdate } from "@/request/axios";
import { dataKey, dataType, dataList } from "./index.config";
const dialogTableVisible = ref(false);
const tableData = ref([]);
const gridData = ref([]);
const viewDepartent = ref("");
let newData;
const initData = async () => {
  const resSearch = await todoSearch();

  if (dataType(resSearch.data) == "Object") {
    tableData.value = [];
    newData = dataKey(resSearch.data);
    Object.keys(dataKey(resSearch.data)).forEach((val) => {
      const status = dataKey(resSearch.data)[val].length;
      const textStatus =
        dataKey(resSearch.data)[val].length > 0 &&
        dataKey(resSearch.data)[val].every((val) => val.read)
          ? false
          : true;

      tableData.value.push({
        department: val,
        message: "查看",
        data: dataKey(resSearch.data)[val],
        textStatus: textStatus && status > 0 ? "danger" : "",
        status: status > 0 ? false : true,
      });
    });
  }
};
onMounted(() => {
  initData();
});
const handleCellClick = (props, data) => {
  gridData.value = [];
  if (data.data.length == 0) {
    ElMessage({
      type: "warning",
      message: "该部门没有待办数据",
    });
    return;
  }
  dialogTableVisible.value = true;
  let newData = data.data?.map((val) => {
    let newObj = {};
    for (let key in val) {
      if (dataList[key]) {
        newObj[key] = val[key];
      }
    }
    return newObj;
  });
  if (newData?.length > 0) {
    viewDepartent.value = data.department;
    newData.forEach((val) => {
      gridData.value.push(val);
    });
  }
};

const modalConfirmClick = async () => {
  dialogTableVisible.value = false;
  const resUpdate = await todoUpdate({
    department: viewDepartent.value,
  });
  initData();
};
</script>
<style scoped></style>
